<template>
  <el-container class="home-cotainer">
    <el-aside width="200px">
      <!-- 图片 -->
      <img class="logo" src="../assets/logo.png" alt="" />
      <!-- 侧边栏菜单 -->
      <el-menu router unique-opened>
        <el-menu-item index="/home/dashboard">
          <img class="img_ybp" src="../assets/ybp.png" alt="" />
          <span>仪表盘</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <img class="img_menu" src="../assets/menu.png" alt="" />
            <span>常用设置</span>
          </template>
          <el-menu-item index="/home/teachermanagement">教师管理</el-menu-item>
          <el-menu-item index="2-2">学生管理</el-menu-item>
          <el-menu-item index="2-3">公告管理</el-menu-item>
          <el-menu-item index="2-4">系统配置</el-menu-item>
          <el-menu-item index="2-5">判题服务器</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><aim /></el-icon>
            <span>问题</span>
          </template>
          <el-menu-item index="3-1">问题列表</el-menu-item>
          <el-menu-item index="3-2">增加题目</el-menu-item>
          <el-menu-item index="3-3">导入导出题目</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><trophy /></el-icon>
            <span>比赛&练习</span>
          </template>
          <el-menu-item index="4-1">比赛列表</el-menu-item>
          <el-menu-item index="4-2">创建比赛</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><collection /></el-icon>
            <span>课程</span>
          </template>
          <el-menu-item index="/home/courselist">课程列表</el-menu-item>
          <el-menu-item index="5-2">创建课程</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="header_con">
          <el-icon><search /></el-icon>
          <el-icon class="share"><share /></el-icon>
          <el-dropdown>
            <span class="el-dropdown-link">
              username
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>标题</span>
            </div>
          </template>
          <div class="cardCon">
              <router-view></router-view>
          </div>
        </el-card>
      </el-main>
      <el-footer>Build Version:20210929bd</el-footer>
    </el-container>
  </el-container>
</template>

<script>
export default {};
</script>

<style scoped>
.el-header {
  background-color: #f9fafc;
  height: 50px;
}
.logo{
    width: 100px;
    margin: 30px 0 30px 44px;
}
.header_con {
  position: absolute;
  right: 20px;
  margin-top: 14px;
}
.share {
  margin: 0 10px 0 10px;
}
.el-main {
  background-color: #edecec;
}
.cardCon {
  text-align: center;
}
.el-menu {
  border-right: none;
}
.el-footer {
  background-color: #edecec;
  text-align: center;
}

.home-cotainer {
  height: 100%;
}
.img_ybp {
  width: 21px;
}
.img_menu {
  width: 19px;
  margin-left: 2px;
  margin-right: 6px;
}
</style>